<!--
 * @Description: 收藏
 -->
<template>
  <div class="collect">
    <!-- Add a static page for my favorite module -->
    <div class="collect-header">
      <div class="collect-title">
        <p>
          我的收藏&nbsp;&nbsp;<span style="font-size: 10px;color: #adb0b3">收藏的景点都会在这里</span>
        </p>
      </div>
    </div>
    <div class="content">
      <div class="goods-list" v-if="collectList.length > 0">
        <section class="mac-bibei pb-8 layout-index">
          <div class="pc-model">
            <section class="layout-content pt-6">
              <div class="container">
                <div>
                  <div class="app-section wk-list mb-6 w-r" style="margin-left: -10px; margin-right: -10px;">
                    <div v-for="item in collectList" :key="item.productPid" class="w-c w-c-4"
                         style="padding-left: 10px; padding-right: 10px; padding-bottom: 20px;">
                      <div class="inner-box white">
                          <span class="text-muted opacity-80 text-truncate">
                          <el-popover placement="top">
                          <p>确定删除吗？</p>
                          <div style="text-align: right; margin: 10px 0 0">
                            <el-button
                              type="primary"
                              size="mini"
                              @click="deleteCollect(item.productPid)"
                            >确定
                            </el-button
                            >
                          </div>
                          <i
                            class="el-icon-close delete"
                            slot="reference"
                            v-show="true"
                          ></i>
                        </el-popover>
                          </span>
                        <router-link :to="{ path: '/product/details', query: { productID: item.productPid } }">
                          <h4
                            class="text-truncate">
                            {{ item.productName }}
                          </h4>
                          <p class="text-muted opacity-80 text-truncate mb-6 position-relative">{{ item.des }}</p>
                          <div class="btn-box clearfix"><i class="light-icon-more icon-next-arrow fs-36 v-m-5"></i>
                          </div>
                          <div class="icon-box">
                            <div class="border-layer"></div>
                            <img class="w-64"
                                 data-src="https://static.konlonair.com/public/uploads/_/originals/cleanmymac-x-1.png"
                                 :src=item.imgUrl[0]
                                 style="border-radius:10px;"
                                 lazy="loaded"></div>
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
          <div class="mobile-model">
            <div class="d-flex layout-min-full-height justify-content-center align-items-center">
              <div class="text-center" style="width: 80%; margin: 0px auto;"><h1 class="mb-4">哇，窗口太小啦</h1>
                <p class="mb-6">请调整浏览器窗口大小或者请使用手机查看！</p></div>
            </div>
          </div>
          <div id="sidetools" class="macwk-animation tinUpIn" style="display: none;">
            <div class="sidetools-item">
              <div class="sidetools-wrapper">
                <a href="/"
                   class="cursor el-popover__reference" aria-describedby="el-popover-3055"
                   tabindex="0">
                  <span class="sidetools-icon kfqq">
                  </span>
                </a>
              </div>
            </div>
            <div class="sidetools-item">
              <div class="sidetools-wrapper">
                <a class="el-tooltip cursor" aria-describedby="el-tooltip-8724"
                   tabindex="0"><span class="sidetools-icon back-top"></span></a></div>
            </div>
            <span>
              <div role="tooltip" id="el-popover-2425" aria-hidden="true" class="el-popover el-popper"
                   style="width: 200px; display: none;">
                <div class="text-center">
                  <a href="/feedback"
                     class="mt-15 mb-0">在线留言</a>
                </div>
              </div>
              <span
                class="el-popover__reference-wrapper">
            </span>
            </span>
            <span>
              <div role="tooltip" id="el-popover-3055"
                   aria-hidden="true"
                   class="el-popover el-popper" tabindex="0"
                   style="width: 200px; display: none;">
                <div
                  class="text-center">
                  <a href="/feedback" class="mt-15 mb-0">在线留言</a>
                </div>
              </div>
              <span
                class="el-popover__reference-wrapper">

              </span>
            </span>
          </div>
        </section>
      </div>
      <!-- 收藏列表为空的时候显示的内容 -->
      <div v-else class="collect-empty">
        <div class="empty">
          <h2>您的收藏还是空的！</h2>
        </div>
      </div>
      <!--  收藏列表为空的时候显示的内容END -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collectList: [],
    };
  },
  methods: {
    refreshList(item) {
      // item是子组件传过来的值
      if (item == 200) {
        const params = new URLSearchParams();
        let userInfo = JSON.parse(localStorage.getItem("user"))
        params.append("userPid", userInfo.pid);
        this._getUserCollect_(params)
      }
    },
    _getUserCollect_(params) {
      this.$axios
        .post("/cat/userCollect/getCollect", params, {
          headers: {"content-type": "application/x-www-form-urlencoded"},
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.collectList = res.data.data.collectList;
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    deleteCollect(productPid) {
      const params = new URLSearchParams();
      params.append("productPid", productPid);
      // 获取收藏数据
      this.$axios
        .post("/cat/userCollect/deleteCollect", params, {
          headers: {"content-type": "application/x-www-form-urlencoded"},
        })
        .then((res) => {
          switch (res.data.code) {
            case 200:
              // 删除成功
              // 删除删除列表中的该商品信息
              for (let i = 0; i < this.collectList.length; i++) {
                const temp = this.collectList[i];
                if (temp.pid == productPid) {
                  this.collectList.splice(i, 1);
                }
              }
              // 删除成功
              this.$message({
                showClose: false,
                message: "删除成功",
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.refreshList(200)
                  // this.$emit("refresh-item", 200)
                  // this.$router.push("/collect");
                },
              });
              break;
            default:
              // 删除失败
              this.notifyError(res.data.msg);
          }
        })
        .catch((err) => {
          // this.$router.push("/login");
          return Promise.reject(err);
        });
    },
  },
  activated() {
    const params = new URLSearchParams();
    let userInfo = JSON.parse(localStorage.getItem("user"))
    params.append("userPid", userInfo.pid);
    // 获取收藏数据
    this._getUserCollect_(params)
  },
};
</script>
<style>
.collect {
  background-color: #f5f5f5;
}

.collect .collect-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #000;
}

.collect .collect-header .collect-title {
  width: 1225px;
  color: #424242;
  margin: 0 auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}

.collect .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}

.collect .content .goods-list {
  overflow: hidden;
  padding: 0 0;
  width: 100%;
  margin: 0 auto;
}

/* 收藏列表为空的时候显示的内容CSS */
.collect .collect-empty {
  width: 1225px;
  margin: 0 auto;
}

.collect .collect-empty .empty {
  height: 300px;
  color: #000;
  overflow: hidden;
}

.collect .collect-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}

.collect .collect-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}

/* 收藏列表为空的时候显示的内容CSS END */
</style>
